<template>
  <div class="about">
     <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
      <li v-for="(item,index) in playlists" :key="index" class="infinite-list-item">
        <img class="pic" :src="item.coverImgUrl" alt="">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
   data () {
      return {
        count: 0,
        playlists:[]
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      load () {
        this.getData()
      },
      getData(){
        this.$http.get('/top/playlist?cat=华语').then(res=>{
          this.playlists = [...this.playlists,...res.data.playlists]
        })
      }
    }
}
</script>

<style scoped>
ul{
  display: flex;
  flex-wrap: wrap;
}
.pic{
  width: 150px;
  height: 150px;
  margin-right: 20px;
}
</style>
